<template>
  <Echart
    id="rightBottom"
    :options="option"
    class="right_bottom_inner"
    v-if="pageflag"
    ref="charts"
  />
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import { graphic } from "echarts";
export default {
  data() {
    return {
      option: {},
      pageflag: false,
    };
  },
  created() {},

  mounted() {
    this.getData();
  },
  beforeDestroy() {},
  methods: {
    getData() {
      let res = [
        {
          createDate: "2023-05-19",
          processed: 0,
          untreated: 1,
        },
      ];
      this.pageflag = true;
      if (res.length > 0) {
        const newDate = [7, 6, 5, 4, 3, 2, 1].map((item) => {
          const weekBefore = this.$moment()
            .subtract(item, "days")
            .format("YYYY-MM-DD"); // 近七日日期
          // const flag = res.some((_item) => {
          //   return _item.createDate === weekBefore
          // })
          const resp = res.filter((__item) => __item.createDate === weekBefore);
          if (resp.length === 1) {
            const obj = {
              createDate: weekBefore,
              processed: resp[0].processed,
              untreated: resp[0].untreated,
            };
            return obj;
          } else {
            const obj = {
              createDate: weekBefore,
              processed: 0,
              untreated: 0,
            };
            return obj;
          }
        });
        const dateList = newDate.map((item) => item.createDate); // 日期
        const processedArr = newDate.map((item) => item.processed); // 处理数(已处理)
        const untreatedArr = newDate.map((item) => item.untreated); // 报警数(未处理)
        this.$nextTick(() => {
          this.init(dateList, processedArr, untreatedArr);
        });
      } else {
        // 获取当前日期前七天的日期,循环展示
        const newDate = [7, 6, 5, 4, 3, 2, 1].map((item) => {
          const weekBefore = this.$moment()
            .subtract(item, "days")
            .format("YYYY-MM-DD"); // 近七日日期
          const obj = {
            createDate: weekBefore,
            processed: 0,
            untreated: 0,
          };
          return obj;
        });
        const dateList = newDate.map((item) => item.createDate); // 日期
        const processedArr = newDate.map((item) => item.processed); // 处理数(已处理)
        const untreatedArr = newDate.map((item) => item.untreated); // 报警数(未处理)
        this.$nextTick(() => {
          this.init(dateList, processedArr, untreatedArr);
        });
      }
    },
    init(xData, yData, yData2) {
      this.option = {
        color: ["#EFBA55 ", "#3778D1"],
        legend: {
          icon: "circle",
          textStyle: {
            color: "#ffffff",
          },
        },
        xAxis: {
          type: "category",
          data: xData,
          boundaryGap: false, // 不留白，从原点开始
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(31,99,163,.2)",
            },
          },
          axisLine: {
            // show:false,
            lineStyle: {
              color: "rgba(31,99,163,.1)",
            },
          },
          axisLabel: {
            color: "#7EB7FD",
            fontWeight: "500",
          },
        },
        yAxis: {
          type: "value",
          minInterval: 1, // 设置成1保证坐标轴分割刻度显示成整数。
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(31,99,163,.2)",
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(31,99,163,.1)",
            },
          },
          axisLabel: {
            color: "#7EB7FD",
            fontWeight: "500",
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
        },
        grid: {
          // 布局
          x: 50,
          y: 50,
          x2: 50,
          y2: 30,
          // show: true,
          // left: '10px',
          // right: '30px',
          // bottom: '10px',
          // top: '38px',
          // containLabel: true,
          // borderColor: '#1F63A3'
        },
        series: [
          {
            data: yData,
            type: "line",
            smooth: true,
            symbol: "none", // 去除点
            name: "处理数",
            color: "rgba(252,144,16,.7)",
            areaStyle: {
              // 右，下，左，上
              color: new graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(252,144,16,.7)",
                  },
                  {
                    offset: 1,
                    color: "rgba(252,144,16,.0)",
                  },
                ],
                false
              ),
            },
            markPoint: {
              data: [
                {
                  name: "最大值",
                  type: "max",
                  valueDim: "y",
                  symbol: "rect",
                  symbolSize: [60, 26],
                  symbolOffset: [0, -20],
                  itemStyle: {
                    color: "rgba(0,0,0,0)",
                  },
                  label: {
                    // color: '#09CAF3',
                    backgroundColor: "rgba(252,144,16,0.1)",
                    borderRadius: 6,
                    padding: [7, 14],
                    borderWidth: 0.5,
                    borderColor: "rgba(252,144,16,.5)",
                    formatter: "处理数：{c}",
                  },
                },
                {
                  name: "最大值",
                  type: "max",
                  valueDim: "y",
                  symbol: "circle",
                  symbolSize: 6,
                  itemStyle: {
                    color: "#FC9010",
                    shadowColor: "#FC9010",
                    shadowBlur: 8,
                  },
                  label: {
                    formatter: "",
                  },
                },
              ],
            },
          },
          {
            data: yData2,
            type: "line",
            smooth: true,
            symbol: "none", // 去除点
            name: "报警数",
            color: "rgba(9,202,243,.7)",
            areaStyle: {
              // 右，下，左，上
              color: new graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(9,202,243,.7)",
                  },
                  {
                    offset: 1,
                    color: "rgba(9,202,243,.0)",
                  },
                ],
                false
              ),
            },
            markPoint: {
              data: [
                {
                  name: "最大值",
                  type: "max",
                  valueDim: "y",
                  symbol: "rect",
                  symbolSize: [60, 26],
                  symbolOffset: [0, -20],
                  itemStyle: {
                    color: "rgba(0,0,0,0)",
                  },
                  label: {
                    // color: '#FC9010',
                    backgroundColor: "rgba(9,202,243,0.1)",

                    borderRadius: 6,
                    borderColor: "rgba(9,202,243,.5)",
                    padding: [7, 14],
                    formatter: "报警数：{c}",
                    borderWidth: 0.5,
                  },
                },
                {
                  name: "最大值",
                  type: "max",
                  valueDim: "y",
                  symbol: "circle",
                  symbolSize: 6,
                  itemStyle: {
                    color: "#09CAF3",
                    shadowColor: "#09CAF3",
                    shadowBlur: 8,
                  },
                  label: {
                    formatter: "",
                  },
                },
              ],
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.right_top_inner {
  margin-top: -8px;
}
</style>
